<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <search-bar></search-bar>
    <tab :line-width="2">
      <tab-item :selected="type === 'best'" @on-item-click="onItemClick('best')">精品课程</tab-item>
      <tab-item :selected="type === 'free'" @on-item-click="onItemClick('free')">免费课程</tab-item>
      <tab-item :selected="type === 'all'" @on-item-click="onItemClick('all')">全部课程</tab-item>
    </tab>
    <box gap="10px">
      <course v-for="(item, index) in list" :key="index" :product="item"></course>
    </box>
    <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
      <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
      <empty slot="no-results" tips="暂时没有相关课程"></empty>
    </infinite-loading>
    <footer-bar  slot="bottom" selected="home"></footer-bar>
  </view-box>
</template>
<script>
  import { ViewBox, Box, Tab, TabItem } from 'vux'
  import FooterBar from '../components/FooterBar'
  import SearchBar from '../components/SearchBar'
  import Course from '../components/Course'
  export default {
    data () {
      return {
        list: [],
        category_id: '',
        name: '',
        type: 'all'
      }
    },
    computed: {
      classOption () {
        return {
          direction: 2,
          limitMoveNum: 2,
          step: 0.3
        }
      },
      url () {
        let url = '/courses?is_on_sale=1&category_id=' + this.category_id + '&name=' + this.name
        if (this.type === 'all') {
          return url
        } else if (this.type === 'free') {
          url += '&is_free=1'
          return url
        } else if (this.type === 'best') {
          url += '&is_best=1'
          return url
        }
      }
    },
    components: {
      ViewBox,
      FooterBar,
      SearchBar,
      Box,
      Course,
      Tab,
      TabItem
    },
    created () {
      this.type = this.$route.query.type
      this.name = this.$route.query.name ? this.$route.query.name : ''
      this.category_id = this.$route.query.category ? this.$route.query.category : ''
    },
    watch: {
      url () {
        this.list = []
        this.$nextTick(() => {
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
        })
      },
      '$route' (to, from) {
        if (this.$route.query.name !== this.name) {
          this.name = this.$route.query.name
        }
      }
    },
    methods: {
      onItemClick (type) {
        this.type = type
      },
      infiniteHandler ($state) {
        this.$http.get(this.url, {
          params: {
            page: this.list.length / 20 + 1,
            page_size: 20
          }
        }).then((response) => {
          if (response.data.data.length) {
            this.list = this.list.concat(response.data.data)
            $state.loaded()
            if (!response.data.next_page_url) {
              $state.complete()
            }
          } else {
            $state.complete()
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .title {
    font-weight: 500;
    color: #000;
    padding-bottom: 5px;
    margin-top: 15px;
    span {
      float: right;
      color: #999;
      font-size: 14px;
    }
  }
  .gutter {
    height: 15px;
    margin-top: 10px;
    background: #EFEFF4;
  }
</style>